<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>19-overwrite</title>
    <script src="../js/vue.js"></script>
    <script src="../element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <el-button type="primary" @click="openAddPage()">点击添加用户信息</el-button>
    <el-dialog :visible.sync="flag" title="添加用户信息" @close="resetForm()">
        <el-form :model="addUserData" :rules="ruleReg" ref="frm">
<!--            用户名-->
            <el-form-item label="用户" label-width="60px" prop="username">
                <el-input name="username" type="text" prefix-icon="el-icon-user" placeholder="请输入用户名" v-model="addUserData.username"></el-input>
            </el-form-item>

            <!--年龄-->
            <el-form-item label="年龄" label-width="60px">
                <el-input-number name="age" :min="0" :max="120" :step="1" v-model="addUserData.age"></el-input-number>
            </el-form-item>

            <!--性别-->
            <el-form-item label="性别" label-width="60px">
                <el-radio-group v-model="addUserData.sex">
                    <el-radio name="sex" label="1">男</el-radio>
                    <el-radio name="sex" label="0">女</el-radio>
                </el-radio-group>
            </el-form-item>

            <!--生日-->
            <el-form-item label="生日" label-width="60px">
                <el-date-picker name="birthday" type="datetime" v-model="addUserData.birthday"></el-date-picker>
            </el-form-item>

            <!--地址-->
            <el-form-item label="地址" label-width="60px" prop="address">
                <el-input name="address" type="text" prefix-icon="el-icon-location-outline" placeholder="请输入地址" v-model="addUserData.address"></el-input>
            </el-form-item>

            <!--爱好-->
            <el-form-item label="爱好" label-width="60px">
                <el-checkbox-group v-model="addUserData.hobby">
                    <el-checkbox name="hobby" label="0">吃饭</el-checkbox>
                    <el-checkbox name="hobby" label="1">睡觉</el-checkbox>
                    <el-checkbox name="hobby" label="2">看书</el-checkbox>
                </el-checkbox-group>
            </el-form-item>

            <!--职业-->
            <el-form-item label="职业" label-width="60px">
                <el-select v-model="addUserData.job">
                    <el-option name="job" label="--请选择职业--" value="0"></el-option>
                    <el-option name="job" label="攻城狮" value="1"></el-option>
                    <el-option name="job" label="程序猿" value="2"></el-option>
                    <el-option name="job" label="码农" value="3"></el-option>
                </el-select>
            </el-form-item>

            <!--婚姻-->
            <el-form-item label="婚姻" label-width="60px">
                <el-switch inactive-text="未婚" active-text="已婚" v-model="addUserData.merry"></el-switch>
            </el-form-item>

            <!--确认和取消-->
            <el-form-item>
                <el-row type="flex" justify="center">
                    <el-col :span="6"><el-button type="success" @click="formSubmit()">确定</el-button></el-col>
                    <el-col :span="6"><el-button type="danger" @click="resetForm()">取消</el-button></el-col>
                </el-row>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
            flag: false,

            // 用户信息
            addUserData: {
                username: undefined,
                age:undefined,
                sex:undefined,
                birthday:undefined,
                address:undefined,
                hobby:[],
                job:undefined,
                merry:undefined,
            },
            ruleReg:{
                username:[
                    {required:true,message:"用户名不能为空",trigger:blur()},
                    {min:2,max:20,message: "用户名长度必须在2-20之间",trigger: blur()},
                ],
                address:[
                    {required:true,message:"地址不能为空",trigger:blur()},
                    {min:2,max:60,message: "地址长度必须在2-60之间",trigger: blur()},
                ],
            },
        },
        methods: {
            openAddPage: function () {
                this.flag = true;
            },
            formSubmit:function () {
                this.$refs["frm"].validate(flag=>{
                    if (flag){
                        alert("表单校验成功");
                        this.flag=false;
                    }
                    else {
                        alert("表单校验失败，请检查");
                    }
                });
            },
            resetForm:function () {
                this.$refs["frm"].resetFields();
            }
        },
    });
</script>
</body>
</html>